<template>
	<div ref="mgrDialog" class="dialog-wrap">
		  
		<el-dialog 
			:title="headerTitle" 
			width="70%"
			@close="resetDialog" 
			:visible.sync="DialogVisible"
		>
			
			<el-row :gutter="20">

				<el-form 
					v-if = "editForm != null"
					ref="dialogForm"
					:rules="rules"
					size="mini"
					:label-width="formLabelWidth"
					:model.sync="editForm">
					
					<el-col :span="12">
						<el-form-item label="供应商/人" prop="supplier">
		      				
		    			<el-select v-model="editForm.supplier"  placeholder="请选择产品">
								  <el-option
									v-for="item in supplierlist"
									:key="item.cusNo"
									:label="item.name"
									:value="item.cusNo">
									</el-option>
							  </el-select>
						</el-form-item>
		    		</el-col>

					<el-col :span="12">
						<el-form-item label="入库时间" prop="recordTime">
		      				<el-date-picker
		      					class="with-full"
		      					v-model="editForm.recordTime"
		      					type="datetime"
		      					placeholder="请输入入库时间"
		      				></el-date-picker>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="产品名称" prop="productCode">
		      				<el-select v-model="editForm.productCode"  placeholder="请选择产品">
								  <el-option
									v-for="item in productlist"
									:key="item.cropNo"
									:label="item.cropName"
									:value="item.cropNo">
									</el-option>
							  </el-select>
		    			</el-form-item>
		    		</el-col>

		    		
		    		<el-col :span="12">	
		    			<el-form-item label="仓库名称" prop="warehouseName">
		      				<el-input v-model="editForm.warehouseName" autocomplete="off" placeholder="请输入仓库名称"></el-input>
		    			</el-form-item>
		    		</el-col>


		    		<el-col :span="12">	
		    			<el-form-item label="数量" prop="matNum">
		      				<el-input v-model="editForm.matNum" type="number" autocomplete="off" placeholder="请输入数量"></el-input>
		    			</el-form-item>
		    		</el-col>


		    		<el-col :span="12">	
		    			<el-form-item label="单价" prop="unitPrice">
		      				<el-input v-model="editForm.unitPrice" autocomplete="off" placeholder="请输入单价"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="金额" prop="amount">
		      				<el-input v-model="editForm.amount" autocomplete="off" placeholder="请输入金额"></el-input>
		    			</el-form-item>
		    		</el-col>


		    		<el-col :span="12">	
		    			<el-form-item label="批号" prop="batchNo">
		      				<el-input v-model="editForm.batchNo" autocomplete="off" placeholder="请输入批号"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		
		    		<el-col :span="12">	
		    			<el-form-item label="入库Hash" prop="recordHash">
		      				<el-input v-model="editForm.recordHash" autocomplete="off" placeholder="请输入入库Hash"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="Hash时间" prop="hashTime">
		      				<el-date-picker
		      					class="with-full"
		      					v-model="editForm.hashTime"
		      					type="datetime"
		      					placeholder="请输入Hash时间"
		      				></el-date-picker>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="区块Hash" prop="blockHash">
		      				<el-input v-model="editForm.blockHash" autocomplete="off" placeholder="请输入区块Hash"></el-input>
		    			</el-form-item>
		    		</el-col>
                     
					 <el-col :span="22">	
		    			<el-form-item label="照片">
						   <div class="pic-wrap" @click="uploadPi">
		      				<img v-if="!editForm.image" class="add-pic" :src="addPic"  style="width:170px;height:100px;"/>
							<img v-else class="add-pic"  :src="baseUrl+'/rest/common/preview/' + editForm.image" style="width:170px;height:100px;">
							<h1 v-if="!testForm.test"  style="display:none">woaini</h1>
							<h1 v-else style="display:none">34535</h1>
							<el-upload
								with-credentials
								:action="uploadUrl"
								style="display: none"
								accept="image/*"
								:headers="uploadHeaders"
								:on-success="handleAvatarSuccess"
							>
								<el-button size="small" id="uploadPi" ref="uploadPi">点击上传</el-button> 
							</el-upload>
						   </div>
		    			</el-form-item>
		    		</el-col>

				</el-form>
			</el-row>
			
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="confirm">确定</el-button>
			    <el-button size="mini" type="danger" @click="cancel">取消</el-button>
			</div>	
		</el-dialog>

	</div>
</template>


<script>
import { list as groupList } from "@/api/equipment/group"
import { getRolesTree,getRoleTreeList } from "@/api/admin/roles"
import { getUserInfo,alterAvatar } from "@/api/user"
import { convertDataToTree } from "@/utils/util"
import InputTree from "@/components/InputTree"
import {
  list as productlist
} from "@/api/farm/production";
import {
  list as supplierlist
} from "@/api/scm/supplier";
import { baseUrl } from '@/config/env';
//上传图片
const uploadUrl = baseUrl+'/rest/common/upload';
import { getToken } from '@/utils/auth';
export default{
	props:{
		//新增还是编辑
	    type:{
	      type:[Number,String],
	      defalut:1
	    },
		visible:{
			type:Boolean,
			default:false
		},
		form:{
			type:Object,
			default:null
		}
	},
	components:{
    	InputTree
  	},
	watch:{
		form(newVal,oldVal){
			if(newVal != null){
				this.editForm = newVal;
			}else{
				//this.editForm = this.defaultForm;
				this.testForm.test = false;
				this.editForm.supplier = '';
				this.editForm.recordTime = '';
				this.editForm.productCode = '';
				this.editForm.warehouseName = '';
				this.editForm.matNum = '';
				this.editForm.unitPrice = '';
				this.editForm.amount = '';
				this.editForm.batchNo ='';
				this.editForm.recordHash = '';
				this.editForm.hashTime = '';
				this.editForm.blockHash = '';
				this.editForm.image = ''
			}	
		},
		type(newVal,oldVal){
	      	if(newVal == 1){
	        	this.headerTitle = "添加"
	      	}else if(newVal == 2){
	        	this.headerTitle = "修改"
	      	}
	    },
	    visible(val){
	    	this.DialogVisible = val;
	    	if(this.form === null){
	    		this.editForm = this.defaultForm;
	    	}
	    }
	},
	data(){
		return{
			testForm:{
				test:false
			},
			baseUrl:baseUrl,
			uploadUrl:uploadUrl,
			uploadHeaders:{'Authorization':'Bearer ' + getToken()},
			addPic:require("@/assets/farm/images/add-pic_08.jpg"),
			supplierlist:[],
			productlist:[],
			headerTitle:"添加",
			DialogVisible:false,
			defaultForm:{
				supplier:'',
				recordTime:'',
				productName:'',
				warehouseName:'',
				matNum:'',
				unitPrice:'',
				amount:'',
				batchNo:'',
				recordHash:'',
				hashTime:'',
				blockHash:'',
				image:''
			},
			groupTree:[],
			testEquipmentGroup:[
				{
					checked: true, 
					iconSkin: null, 
					id: 0, 
					name: "根目录", 
					open: true, 
					pId: 0
				},
				{
					checked: null, 
				 	iconSkin: null, 
				 	id: 1, 
				 	name: "继电器设备", 
				 	open: true, 
				 	pId: 0
				},
				{
					checked: null, 
				 	iconSkin: null, 
				 	id: 2, 
				 	name: "采集设备", 
				 	open: true, 
				 	pId: 0
				}
			],
			equipGroupProps:{
        		children: 'children',
        		label: 'name',
        		value: 'id'
      		},
			editForm:{
				image:''
			},
			formLabelWidth:'120px',
			//验证规则
		    rules:{
		        supplier:[{required:true,message:"请输入供应商/人",trigger:"blur"}],
		        productName:[{required:true,message:"请输入产品名称",trigger:"blur"}],
		    },
		}
	},
	created(){
		productlist(1, 100, {keywords:''}).then(res=>{
			this.productlist = res.data.data.records;
		});
		supplierlist(1, 1000, '2').then(res=>{
			this.supplierlist = res.data.data.records
		})
	},
	mounted(){
		this.getRoleTree();
	},
	methods:{
		
		//上传图片
		uploadPi(){
		    const uploadBtn = window.document.getElementById("uploadPi");
          	uploadBtn.click();
		},
		//上传图片成功
		handleAvatarSuccess(res,file){
			console.log("---上传头像成功----")
			console.log(res);
			var fileId = res.data.fileId;
			alterAvatar(fileId).then((res)=>{
				console.log("------修改头像成功-------")
				console.log(res);
				if(res.data.code == 200){
					//请求新用户信息
					// this.$store.dispatch('user/GetUserInfo');
					this.editForm.image = fileId;
					this.testForm.test = true;
				}
			})
		},
		//获取树形分组
		getRoleTree(){

			groupList().then((res)=>{
				console.log("-----------获取树形菜单-----------")
				console.log(res);
				const result = res.data.data.records;
				this.groupTree = result;
			})

		},
		resetDialog(){
			this.DialogVisible = false;
			this.editForm = null;
			this.$emit('cancel')
		},
		//分组选择
		groupSelect(data){
			this.editForm.categoryId = data.id;
			this.editForm.categoryName = data.name;
		},
		//取消按钮
		cancel(){
			this.DialogVisible = false;
			this.editForm = null;
			this.$emit('cancel')
		},
		confirm(){
			this.$refs.dialogForm.validate((valid)=>{
		        if (valid) {
		          this.DialogVisible = false;

		          this.$emit('confirm',{type:this.type,data:this.editForm});

		        } else {
		           
		            return false;
		        }

      		})
		}

	}
}


</script>

<style scoped>
	.with-full{
	    width:100%!important;
	}
</style>